


<extend name="Public:layout"/>
<block name="content">
<style type="text/css">

    .er{color:red;}
</style>
<div class="row-fluid sortable ui-sortable">
                <div class="box span12">
                    <div data-original-title="" class="box-header">
                        <h2><i class="halflings-icon white edit"></i><span class="break"></span>员工添加</h2>
                        <div class="box-icon">
                            <a class="btn-setting" href="#"><i class="halflings-icon white wrench"></i></a>
                            <a class="btn-minimize" href="#"><i class="halflings-icon white chevron-up"></i></a>

                        </div>
                    </div>
                    <div class="box-content">
                        <form id="signupForm" enctype="multipart/form-data" class="form-horizontal" action="" method="post" >
                            <fieldset>

                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">用户名</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16"  name="username">
                                      </div>

                                    </div>
                              </div>

                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">部门</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16"   name = "section">
                                      </div>

                                    </div>
                              </div>
                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">工号</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16"  name="number">
                                      </div>

                                    </div>
                              </div>
                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">电话</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16" id="tel" name="tel">
                                      </div>

                                    </div>
                              </div>
                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">住址</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16"  name="address">
                                      </div>

                                    </div>
                              </div>
                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">登录密码</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="password" size="16" id="password" name="password">
                                      </div>

                                    </div>
                              </div>
                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">确认密码</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="password" size="16"  name="confirm_password">
                                      </div>

                                    </div>
                              </div>
                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">校验码</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16" id="code" name="code" style="width:80px;height:26px;">
                                        <span class="btn btn-warning" id="get_code">点击获取验证码</span>
                                      </div>

                                    </div>
                              </div>






                              <div class="control-group">
                                <label class="control-label">性别</label>
                                <div class="controls">
                                      <label class="radio">
                                        <input type="radio"  value="1" id="optionsRadios1" name="sex" required>男
                                      </label>

                                      <label class="radio">
                                        <input type="radio" value="0" id="optionsRadios2" name="sex">女
                                      </label>
                                </div>
                              </div>

                               <div class="control-group">
                                <label for="selectError" class="control-label">角色</label>
                                <div class="controls">
                                  <select data-rel="chosen" id="selectError" style="" class="chzn-done" name="group_id">
                                    <option value="0">请选择</option>
                                    <foreach name="role" item="v" key="k">
                                     <option value="{$v.id}" >{$v.title}</option>
                                    </foreach>
                                  </select>
                                </div>
                              </div>

                              <div class="control-group">
                                <label class="control-label">是否就职</label>
                                <div class="controls">
                                      <label class="radio">
                                        <input type="radio"  value="1" id="optionsRadios1" name="status" required>是
                                      </label>

                                      <label class="radio">
                                        <input type="radio" value="0" id="optionsRadios2" name="status">否
                                      </label>
                                </div>
                              </div>
                              <div class="control-group">
                                <label class="control-label">头像上传</label>
                                <div class="controls">

                                  <div class="uploader">
                                      <input type="file" id='file' name='avatar'>
                                      <span class="filename" style="-moz-user-select: none;"></span>
                                      <span class="action" style="-moz-user-select: none;">选择图片</span>

                                  </div>
                                  <img id="img" width=60 height=60 src="" style="float:right;margin-right:1100px;" alt="">
                                </div>
                              </div>

                              <div class="form-actions">
                                <button class="btn btn-primary submit" type="submit">提交</button>

                              </div>
                            </fieldset>
                        </form>
                    </div>
                </div><!--/span-->

            </div>


</block>







<block name="js">

<script src="__PUBLIC__js/jquery.validate.min.js"></script>
    <script type="text/javascript">


    // 选择文件时动态显示图片在旁边
     function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    $('#file').change(function() {

        $('#img').attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this->input

    });



        $(function(){

            //失去光标实时验证
            $('#code').keyup(function(){
                //获取到当前的文本传到ajax控制器中进行验证
                var code =$(this).val();

                $.ajax({
                    type:'get',
                    url:"{:U('admin/confirm_code')}",
                    data:{'code':code},
                    success:function(b){
                        if(b>0){
                        var img= "<a href='#' class='btn btn-danger'><i class='halflings-icon white ok'></i></a>" ;
                        //删除之后的img标签
                        $('#code').nextAll('a').remove();
                        //添加的img标签
                        $('#code').after(img);
                        $('.submit').attr('disabled',false);
                        }else{
                            var img= "<a href='#' class='btn btn-danger'><i class='halflings-icon  white exclamation-sign'></i></a>"  ;
                            //删除之后的img标签
                            $('#code').nextAll('a').remove();
                            //添加的img标签
                            $('#code').after(img);
                            $('.submit').attr('disabled','disabled');
                        }

                    }
                })
            })


            //点击发送短信倒计时

            $('#get_code').click(function(){

                    //获取到表单中的手机号码
                    var tel = $('#tel').val();

                    //用ajax传到程序中
                    $.ajax({
                        type:'post',
                        url:"{:U('admin/send')}",
                        data:{'tel':tel},
                        success:function(a){
                            if(a>0){
                            alert("发送成功");

                            //倒计时3秒
                            var count = 5;
                            //定义一个定时器 每隔1秒调用一次countdown 函数
                            var countdown = setInterval(CountDown, 1000);

                            //定义一个函数
                            function CountDown() {
                                //获取到对应的标签设置为不能点击
                                $("#get_code").attr("disabled", true);
                                //设置这个标签的val值为 重新发送 + 数字  +秒
                                $("#get_code").text('(' +count +')'+ " 秒后"+"重新发送 ");
                                //如果为0时
                                if (count == 0) {

                                    //恢复原来的文本值
                                    $("#get_code").text("获取验证码");

                                    //移除不能点击的属性
                                    $("#get_code").removeAttr("disabled");
                                    //关闭定时器
                                    clearInterval(countdown);
                                }
                                //在函数的最后对其进行自减
                                count--;
                            }
                         }else{
                            alert("发送失败");
                         }
                        }
                    })


             })









            //调用表单验证插件进行表单验证
            $('#signupForm').validate({

                debug:false,
                rules:{
                    username:{
                        required:true,
                        rangelength:[2,10]
                    },
                    section:"required",
                    number:{
                        required:true,
                        digits:true
                    },
                     tel:{
                        required:true,
                        digits:true,
                        rangelength:[11,11]
                   },
                    address:"required",
                    password:{
                        required:true,
                        minlength:8
                    },
                    confirm_password:{
                        required:true,
                        minlength:8,
                        equalTo: "#password"
                    },
                    code:{
                        required:true,
                        rangelength:[6,6],
                        digits:true
                    },

                },

                messages:{
                     username:{
                        required:"请输入用户名",
                        rangelength:"用户名的长度在2-10之间"
                    },
                    section:"请输入所属部门",
                    number:{
                        required:"请输入工号",
                        digits:"工号为整数"
                    },
                    address:"请输入住址",
                    tel:{
                        required:"请输入手机号码",
                        digits:"必须为整数",
                        rangelength:"手机号码长度为11位"

                   },
                    password:{
                        required:"请输入密码",
                        minlength:"密码的长度最少为8位"
                    },
                     confirm_password:{
                        required:"请确认密码",
                        minlength:"密码长度不少于8位",
                        equalTo: "两次密码不一致"

                    },
                     code:{
                        required:"请输入校验码",
                        rangelength:"校验码长度为6位整数",
                         digits:"校验码长度为6位整数"
                    },
                },
                errorClass:'er',
            })

        })


    </script>
</block>